<template>
  <div class="Header">
    <div class="HeaderBox">
      <!--      Logo-->
      <div class="HeaderImg">
        <img src="../assets/images/@2xMOOC平台.png" alt="">
      </div>
      <!--      导航-->
      <div class="HeaderNavigation">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="首页" name="first"></el-tab-pane>
          <el-tab-pane label="课程作业" name="second"></el-tab-pane>
          <el-tab-pane label="我要学习" name="third"></el-tab-pane>
          <el-tab-pane label="难题解答" name="fourth"></el-tab-pane>
        </el-tabs>
      </div>
      <!--      铃铛-->
      <div class="Bell">
        <i class="el-icon-bell"></i>
      </div>
      <!--      登录-->
      <div class="HeaderLogin">
        <div class="Login"><a href="#">登录</a><span>|</span></div>
        <div class="Resign"><a href="">注册</a></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndeHeader",
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped lang="less">
.Header {
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  height: 70px;

  .HeaderBox {
    width: 1200px;
    height: 70px;
    margin: auto;
    overflow: hidden;
    //background-color: green;
    //Logo
    .HeaderImg {
      float: left;
      width: 199px;
      height: 47px;
      padding: 12px 0 11px 0;

      img {
        width: 100%;
      }
    }

    //导航
    .HeaderNavigation {
      float: left;
      margin: 24px 0;
      margin-left: 242px;
      width: 360px;
      height: 22px;

      /deep/ .el-tabs__item {
        height: 22px;
        line-height: 0px;
        font-size: 15px;
      }

      /deep/ .el-tabs__active-bar {
        //display: none;
        height: 0;
      }

      /deep/ .el-tabs__nav-wrap::after {
        height: 0;
      }
    }

    .Bell {
      float: left;
      //margin-left: 284px;
      margin: 23px 0 24px 284px;
      width: 23px;
      height: 27px;
      line-height: 27px;
    }

    //  登录
    .HeaderLogin {
      float: right;
      overflow: hidden;
      margin-top: 24px;
      margin-right: 10px;
      .Login {
        float: left;

        width: 52px;
        height: 14px;
        font-size: 15px;
        a{
          padding-right: 7px;
        }
      }

      .Resign {
        float: right;
        font-size: 15px;
      }
    }
  }
}

</style>